import React, {PureComponent, Fragment} from 'react';
import styles from './index.less'
import {
  Switch,
  Avatar
} from 'antd';
import debounce from 'lodash/debounce';
class BasicList extends PureComponent {
  constructor(props) {
    super(props);
    this.scrollInterval='';
    this.state = {
      boxH:0,
      listMarginTop:"0",
      animate:false,
      auto:true,
      data:[{name:'南亚小区南亚小区南亚小区南亚小区',number:'12390488',val:1},
        {name:'南亚小区南亚小区',number:'12390488',val:2},
        {name:'南亚小区',number:'12390488',val:3},
        {name:'南亚小区',number:'12390488',val:4},
        {name:'南亚小区南亚小区南亚小区',number:'12390488',val:5},
        {name:'南亚小区',number:'12390488',val:6},
        {name:'南亚小区',number:'12390488',val:7},
        {name:'南亚小区',number:'12390488',val:8},
        {name:'南亚小区',number:'12390488',val:9},
        {name:'南亚小区',number:'12390488',val:9},
        {name:'南亚小区',number:'12390488',val:9},
        {name:'南亚小区',number:'12390488',val:9},
        {name:'南亚小区南亚小区南亚小区南亚小区南亚小区',number:'12390488',val:10}]
    };
  }


  componentDidMount() {
    this.props.changeCustomH()
    this.startSerInterval()
  }
  componentWillUnmount() {
    if(this.scrollInterval){
      clearInterval(this.scrollInterval)
    }
  }
  startSerInterval=()=>{
    if(this.scrollInterval){
      clearInterval(this.scrollInterval)
    }
    if(!this.state.auto){
      return false
    }
    const that=this
    this.scrollInterval=setInterval(function() {
      let scrollList2=document.querySelector('#scrollList2');
      let scrollList2Ul=document.querySelector('#scrollList2 ul');
      if(scrollList2.offsetHeight+scrollList2.scrollTop>=scrollList2Ul.offsetHeight){
        console.log('滚动到底部')
        clearInterval(that.scrollInterval)
      }else{
        scrollList2.scrollTop=scrollList2.scrollTop+1
      }
    },100)
  }

  render() {
    return <div>
      <div className={`${styles.header_title} draggableHandle`} >
        <h3 >
          异常水表
          <Avatar className={styles.error_avatar} icon={"exclamation-circle"} shape="square" style={{ marginLeft:'10px',backgroundColor: "#f0af3d",borderRadius:'2px',marginRight:'3px', verticalAlign: 'middle' }} size="small" /><span>漏报</span>
          <Avatar className={styles.error_avatar} icon={"close-circle"} shape="square" style={{ backgroundColor:"#ff1b68",borderRadius:'2px', verticalAlign: 'middle',marginRight:'3px' }} size="small" /><span>错报</span>
        </h3>
        <Switch checked={this.state.auto} onChange={(checked)=>{
          this.setState({
            auto:checked
          },function() {
            this.startSerInterval()
          })
        }} className={styles.rank_btn} checkedChildren="开" unCheckedChildren="关" defaultChecked />
      </div>

      <div className={styles.error_box} style={{height:this.props.boxH+'px'}}   id={'scrollList2'} >
        <ul  style={{marginTop:this.state.listMarginTop}} onMouseEnter={()=>{
          if(this.scrollInterval){
            clearInterval(this.scrollInterval)
          }
        }} onMouseLeave={()=>{
          this.startSerInterval()
        }}>
          {
            this.state.data.map((item,index)=>{
              return  <li key={index} style={{ color: index%2===0?"#f0af3d":"#ff1b68",}}>
                <Avatar className={styles.error_avatar} icon={index%2===0?"exclamation-circle":"close-circle"} shape="square" style={{ backgroundColor: index%2===0?"#f0af3d":"#ff1b68",borderRadius:'2px', verticalAlign: 'middle' }} size="small" />
                <span >{item.number}</span> / <span>{item.name}</span>
              </li>
            })
          }


        </ul>
      </div>
    </div>
  }
}

export default BasicList;
